<!doctype html>
<html lang="zh-Hans">
	<head>
		<title>电池续航计算器 - 嵌入式工具集</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<!-- 以下为浏览器中的配置，正式 编译之后请注释掉这段-->
		<link rel="stylesheet" href="../styles/styles.css" />
		<!-- 以下为LCEDA中的配置，正式 编译之后请勿注释这段-->
		<link rel="stylesheet" href="/iframe/styles/styles.css" />

		<style>
			/* 电池续航计算器专用样式 */
			.calculator-container {
				background: white;
				border-radius: 12px;
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
			}

			.input-group {
				display: flex;
				align-items: stretch;
				gap: 0;
				margin-bottom: 0.75rem;
				background-color: #f8fafc;
				border-radius: 8px;
				overflow: hidden;
				transition: all 0.2s ease;
			}

			.input-group:hover {
				background-color: #f1f5f9;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
			}

			.input-label {
				background-color: #4a90e2;
				color: white;
				padding: 0.75rem 1rem;
				font-weight: 600;
				min-width: 120px;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
			}

			.input-field {
				flex: 1;
				position: relative;
				display: flex;
				align-items: center;
			}

			.input-field input {
				width: calc(100% - 3rem);
				padding: 0.75rem 1rem;
				border: none;
				background: transparent;
				font-size: 1rem;
				outline: none;
				color: #374151;
			}

			.input-field input:focus {
				background-color: white;
			}

			.input-unit {
				width: 3rem;
				text-align: center;
				background: transparent;
				border: none;
				border-left: 1px solid #e2e8f0;
				font-size: 0.875rem;
				color: #6b7280;
				padding: 0.75rem 0.25rem;
			}

			.formula-display {
				background-color: #f8fafc;
				border-radius: 8px;
				padding: 1rem;
				margin-bottom: 1.5rem;
				border: 1px solid #e2e8f0;
			}

			.formula-title {
				font-weight: bold;
				margin-bottom: 0.5rem;
				color: #475569;
			}

			.formula-row {
				color: #334155;
				font-size: 0.875rem;
				margin-bottom: 0.25rem;
			}

			.btn-primary {
				background-color: #10b981;
				color: white;
				border: none;
				border-radius: 6px;
				padding: 0.75rem 1rem;
				cursor: pointer;
				transition: all 0.2s ease;
				font-weight: 500;
				font-size: 1rem;
			}

			.btn-primary:hover {
				background-color: #059669;
				transform: translateY(-1px);
			}

			.btn-primary:disabled {
				opacity: 0.5;
				cursor: not-allowed;
				transform: none;
			}

			.result-cards {
				display: flex;
				flex-direction: column;
				gap: 1rem;
				margin-bottom: 1.5rem;
			}

			.result-card {
				border-radius: 12px;
				padding: 1.5rem;
				text-align: center;
				color: #333;
				transition: transform 0.2s ease;
			}

			.result-card:hover {
				transform: translateY(-2px);
				box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
			}

			.energy-card {
				background: linear-gradient(135deg, #ffcc80 0%, #ffb74d 100%);
			}

			.power-card {
				background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%);
			}

			.time-card {
				background: linear-gradient(135deg, #90caf9 0%, #64b5f6 100%);
			}

			.result-title {
				font-size: 1.2rem;
				font-weight: 600;
				margin-bottom: 0.5rem;
			}

			.result-value {
				font-size: 2rem;
				font-weight: 700;
				margin: 0.5rem 0;
			}

			.result-unit {
				font-size: 1rem;
				color: #555;
			}

			.result-icon {
				font-size: 2rem;
				margin-bottom: 0.5rem;
			}

			.formula-box {
				background-color: #f8fafc;
				border-radius: 8px;
				padding: 1rem;
				margin-bottom: 1.5rem;
				border: 1px solid #e2e8f0;
			}

			.info-section {
				background-color: #f8fafc;
				border-radius: 8px;
				padding: 1rem;
				border: 1px solid #e2e8f0;
			}

			.info-title {
				font-weight: bold;
				margin-bottom: 0.5rem;
				color: #475569;
			}

			.info-list {
				list-style: none;
				padding: 0;
				margin: 0;
			}

			.info-list li {
				color: #334155;
				font-size: 0.875rem;
				margin-bottom: 0.25rem;
			}

			.real-time-container {
				display: flex;
				align-items: center;
				gap: 2rem;
				margin-top: 1rem;
				margin-bottom: 1.5rem;
			}

			.checkbox-container {
				display: flex;
				align-items: center;
				gap: 0.5rem;
				background-color: #ffffff;
				padding: 0.75rem 1rem;
				border-radius: 6px;
				border: 1px solid #e2e8f0;
			}

			.checkbox-container input[type='checkbox'] {
				accent-color: #3b82f6;
				width: 18px;
				height: 18px;
			}

			.checkbox-container label {
				font-size: 1rem;
				font-weight: 500;
				color: #374151;
				cursor: pointer;
			}
		</style>
	</head>
	<body class="bg-gradient-to-br from-light to-blue-50 min-h-screen p-4 font-sans">
		<div class="max-w-md mx-auto bg-white rounded-2xl shadow-lg p-6">
			<h2 class="text-2xl font-bold text-primary mb-6 text-center">电池续航计算器</h2>
			<div class="input-group">
				<div class="input-label">电池容量</div>
				<div class="input-field">
					<input type="number" id="battery-capacity" placeholder="请输入电池容量" value="250" />
					<span class="input-unit">mAh</span>
				</div>
			</div>
			<div class="input-group">
				<div class="input-label">电池电压</div>
				<div class="input-field">
					<input type="number" id="battery-voltage" placeholder="请输入电池电压" value="3.7" step="0.1" />
					<span class="input-unit">V</span>
				</div>
			</div>
			<div class="input-group">
				<div class="input-label">输出电流</div>
				<div class="input-field">
					<input type="number" id="device-current" placeholder="请输入输出电流" value="50" />
					<span class="input-unit">mA</span>
				</div>
			</div>
			<div class="input-group">
				<div class="input-label">效率系数</div>
				<div class="input-field">
					<input type="number" id="efficiency" placeholder="请输入效率系数" value="0.85" min="0" max="1" step="0.01" />
					<span class="input-unit">0-1</span>
				</div>
			</div>
			<div class="real-time-container">
				<div class="checkbox-container">
					<input type="checkbox" id="real-time-update" checked style="accent-color: #3b82f6; width: 18px; height: 18px" />
					<label for="real-time-update">实时更新</label>
				</div>
				<button onclick="batteryCalculate()" class="btn-primary flex-1">计算续航时间</button>
			</div>
			<div class="result-cards">
				<div class="result-card energy-card">
					<div class="result-icon">⚡</div>
					<div class="result-title">电池电量</div>
					<div class="result-value" id="battery-energy">0</div>
					<div class="result-unit">Wh</div>
				</div>
				<div class="result-card power-card">
					<div class="result-icon">🔌</div>
					<div class="result-title">输出功耗</div>
					<div class="result-value" id="output-power">0</div>
					<div class="result-unit">W</div>
				</div>
				<div class="result-card time-card" id="battery-result">
					<div class="result-icon animate-pulse">🔋</div>
					<div class="result-title">续航时间</div>
					<div class="result-value" id="battery-hours">0</div>
					<div class="result-unit">小时</div>
				</div>
			</div>
			<div class="formula-box">
				<div class="formula-title">计算公式</div>
				<div class="formula-row">电池电量(Wh) = 电池电压(V) × 电池容量(mAh) ÷ 1000</div>
				<div class="formula-row">输出功耗(W) = 电池电压(V) × 输出电流(mA) ÷ 1000</div>
				<div class="formula-row">续航时间(小时) = 电池容量(mAh) ÷ 输出电流(mA) × 效率系数</div>
			</div>
			<div class="info-section">
				<div class="info-title">参数说明</div>
				<ul class="info-list">
					<li>电池容量：电池的标称容量，单位为mAh</li>
					<li>电池电压：电池的标称电压，单位为V（锂电池通常为3.7V）</li>
					<li>电池电量：电池存储的总能量，单位为Wh</li>
					<li>输出功耗：电路消耗的功率，单位为W</li>
					<li>输出电流：电路的平均输出电流，单位为mA</li>
					<li>效率系数：考虑电路损耗的修正系数，通常在0.7-0.95之间</li>
				</ul>
			</div>
		</div>
		<script>
			function addRealTimeListeners() {
				document.getElementById('battery-capacity').addEventListener('input', batteryCalculate);
				document.getElementById('battery-voltage').addEventListener('input', batteryCalculate);
				document.getElementById('device-current').addEventListener('input', batteryCalculate);
				document.getElementById('efficiency').addEventListener('input', batteryCalculate);
			}
			function removeRealTimeListeners() {
				document.getElementById('battery-capacity').removeEventListener('input', batteryCalculate);
				document.getElementById('battery-voltage').removeEventListener('input', batteryCalculate);
				document.getElementById('device-current').removeEventListener('input', batteryCalculate);
				document.getElementById('efficiency').removeEventListener('input', batteryCalculate);
			}
			function calculateBatteryEnergy() {
				const capacity = parseFloat(document.getElementById('battery-capacity').value);
				const voltage = parseFloat(document.getElementById('battery-voltage').value);
				const energyElement = document.getElementById('battery-energy');
				if (!isNaN(capacity) && !isNaN(voltage) && capacity > 0 && voltage > 0) {
					const energy = (voltage * capacity) / 1000;
					energyElement.style.transition = 'all 0.3s ease-in-out';
					energyElement.style.opacity = '0.5';
					energyElement.style.transform = 'scale(0.95)';
					setTimeout(() => {
						energyElement.textContent = energy.toFixed(2);
						energyElement.style.opacity = '1';
						energyElement.style.transform = 'scale(1)';
					}, 150);
				}
			}
			function calculateOutputPower() {
				const current = parseFloat(document.getElementById('device-current').value);
				const voltage = parseFloat(document.getElementById('battery-voltage').value);
				const powerElement = document.getElementById('output-power');
				if (!isNaN(current) && !isNaN(voltage) && current > 0 && voltage > 0) {
					const power = (voltage * current) / 1000;
					powerElement.style.transition = 'all 0.3s ease-in-out';
					powerElement.style.opacity = '0.5';
					powerElement.style.transform = 'scale(0.95)';
					setTimeout(() => {
						powerElement.textContent = power.toFixed(3);
						powerElement.style.opacity = '1';
						powerElement.style.transform = 'scale(1)';
					}, 150);
				}
			}
			function batteryCalculate() {
				const capacity = parseFloat(document.getElementById('battery-capacity').value);
				const voltage = parseFloat(document.getElementById('battery-voltage').value);
				const efficiency = parseFloat(document.getElementById('efficiency').value);
				const current = parseFloat(document.getElementById('device-current').value);
				const hoursElement = document.getElementById('battery-hours');
				const energyElement = document.getElementById('battery-energy');
				const powerElement = document.getElementById('output-power');
				if (isNaN(capacity) || isNaN(voltage) || isNaN(efficiency) || isNaN(current)) {
					alert('请输入所有必要的值');
					return;
				}
				if (current <= 0) {
					alert('设备电流必须大于0');
					return;
				}
				const energy = (voltage * capacity) / 1000;
				const power = (voltage * current) / 1000;
				const hours = (capacity / current) * efficiency;
				energyElement.style.transition = 'all 0.3s ease-in-out';
				energyElement.style.opacity = '0.5';
				energyElement.style.transform = 'scale(0.95)';
				setTimeout(() => {
					energyElement.textContent = energy.toFixed(2);
					energyElement.style.opacity = '1';
					energyElement.style.transform = 'scale(1)';
				}, 150);
				powerElement.style.transition = 'all 0.3s ease-in-out';
				powerElement.style.opacity = '0.5';
				powerElement.style.transform = 'scale(0.95)';
				setTimeout(() => {
					powerElement.textContent = power.toFixed(3);
					powerElement.style.opacity = '1';
					powerElement.style.transform = 'scale(1)';
				}, 150);
				hoursElement.style.transition = 'all 0.3s ease-in-out';
				hoursElement.style.opacity = '0.5';
				hoursElement.style.transform = 'scale(0.95)';
				setTimeout(() => {
					hoursElement.textContent = hours.toFixed(2);
					hoursElement.style.opacity = '1';
					hoursElement.style.transform = 'scale(1)';
				}, 150);
				const batteryIcon = document.querySelector('#battery-result .result-icon');
				batteryIcon.classList.remove('animate-pulse');
				void batteryIcon.offsetWidth;
				batteryIcon.classList.add('animate-pulse');
			}
			document.addEventListener('DOMContentLoaded', function () {
				document.getElementById('battery-energy').textContent = '0';
				document.getElementById('output-power').textContent = '0';
				document.getElementById('battery-hours').textContent = '0';
				const realTimeCheckbox = document.getElementById('real-time-update');
				const calculateButton = document.querySelector('button[onclick="batteryCalculate()"]');
				function updateButtonState() {
					calculateButton.disabled = realTimeCheckbox.checked;
					if (realTimeCheckbox.checked) {
						calculateButton.classList.add('opacity-50', 'cursor-not-allowed');
					} else {
						calculateButton.classList.remove('opacity-50', 'cursor-not-allowed');
					}
				}
				realTimeCheckbox.addEventListener('change', function () {
					if (this.checked) {
						addRealTimeListeners();
						batteryCalculate();
					} else {
						removeRealTimeListeners();
					}
					updateButtonState();
				});
				updateButtonState();
				addRealTimeListeners();
				batteryCalculate();
			});
			window.batteryCalculate = batteryCalculate;
		</script>
		<!-- 页脚 -->
		<footer class="max-w-md mx-auto mt-8 text-center text-sm text-gray-500">
			<p>版本号: V0.0.1-20251004</p>
		</footer>
	</body>
</html>
